<!--
 * @Author: zhishiqu
 * @Description: 
 * @Date: 2023-05-11 17:16:48
 * @LastEditTime: 2023-05-12 11:58:17
 * @FilePath: \vue_cesium\src\views\webFlood\index.vue
-->
<template>
    <div id="viewport">
        <div id="frameDuration"></div>
		<div id="cursorPosition"></div>
    </div>
</template>

<script>
import { fileLoad } from './utils'
import * as Cesium from 'cesium/Cesium';
window.Cesium = Cesium
export default {
    components: {},
    props: {},
    data() {
        return {};
    },
    watch: {},
    computed: {},
    methods: {
        windowLoad() {
            document.body.onselectstart =
            document.body.oncontextmenu =
            function () {
                return false; //取消浏览器默认操作
            };
            var devicePixelRatio = 1.0; // || window.devicePixelRatio || 1;
            window.context = new GLOW.Context({

                clear: {red: 0.2, green: 0.2, blue: 0.2},
                preserveDrawingBuffer: true,
                width: window.innerWidth * devicePixelRatio * 1.0,
                height: window.innerHeight * devicePixelRatio
            });

            assureRequiredGLFeatures(context);

            window.viewportElem = document.getElementById("viewport");
            context.domElement.style.height = "100%";
            context.domElement.style.width = "100%";
            viewportElem.appendChild(context.domElement);
        },
        render() {
            // window.requestAnimationFrame(render);

            // var thisFrame = performance.now(); //性能
            // var frameDuration = thisFrame - lastFrame;
            // if (frameDuration > maxFrame) maxFrame = frameDuration;
            // if (frameDuration < minFrame) minFrame = frameDuration;
            // var avg = (thisFrame - lastSecond) / nFrames;
            // lastFrame = thisFrame;

            // if (thisFrame - lastSecond > 1000) {
            //     document.getElementById("frameDuration").textContent =
            //         "min " + minFrame.toFixed(1) + "ms - " +
            //         "avg " + avg.toFixed(1) + "ms - " +
            //         "max " + maxFrame.toFixed(1) + "ms";

            //     minFrame = 1000;
            //     maxFrame = 0;
            //     nFrames = 0;
            //     lastSecond = thisFrame;
            // }

            // nFrames++;
            // nFramesTotal++;

            context.cache.clear();

            Simulation.update();
            Visualisation.render();
        }
    },
    created() {},
    mounted() {
        this.windowLoad()
        this.$nextTick(() => {
            fileLoad()
            // this.render()

            window.render = this.render
        })
    },
};
</script>
<style lang="scss" scoped>

#viewport {
	position: absolute;
	background-color: #333333;

    #frameDuration, #cursorPosition {
        position: absolute;
        right: 1rem;
        color: #fff;
        text-shadow: 1px -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000;
        opacity: 0.5;
        z-index: 3;
    }

    #frameDuration {
        top: 1rem;
    }

    #cursorPosition {
        bottom: 1rem;
    }
}
</style>
